<template>
  <div>
    <!-- 名称 -->
    <div class="s1">
      <div class="s2" v-for="item in list" :key="item.product_id">
        {{ item.product_name }}
        <div></div>
      </div>
    </div>
    <!-- 数据 -->
    <div class="s11" v-for="item in list" :key="item.product_id">
      <!-- 左侧轮播图 -->
      <div class="s11-1">
        <el-carousel :interval="5000" arrow="always" height="560px">
          <el-carousel-item v-for="item in banner" :key="item.id">
            <img
              :src="'http://101.132.181.9:3000/' + item.product_picture"
              alt=""
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 右侧 -->
      <div class="s12">
        <div class="s13">&emsp; {{ item.product_name }}</div>
        <div class="s14">&emsp;{{ item.product_intro }}</div>
        <div class="s15">&emsp;小米自营</div>
        <div class="s16">
          &emsp;{{ item.product_price }};<s>{{ item.product_selling_price }}</s>
        </div>
        <div class="s17">
          <div class="s18"></div>
          <div class="s19">
            <div class="s20">
              {{
                item.product_name
              }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
              {{ item.product_price }};<s>{{ item.product_selling_price }}</s>
            </div>
            <div class="s21">总计 : {{ item.product_price }}</div>
          </div>
        </div>
        <!-- button按钮 -->
        <div class="list">
          <button @click="shopcart(item.product_id)">
            <span class="button-content">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 0H24V24H0z" fill="none"></path>
                <path
                  d="M12.001 4.529c2.349-2.109 5.979-2.039 8.242.228 2.262 2.268 2.34 5.88.236 8.236l-8.48 8.492-8.478-8.492c-2.104-2.356-2.025-5.974.236-8.236 2.265-2.264 5.888-2.34 8.244-.228z"
                  fill="currentColor"
                ></path>
              </svg>
              加入购物车
            </span>
          </button>
          <button @click="love(item.product_id)">收藏!</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getdatalist, bannerList, loveList ,shoplove} from "@/api/details";
export default {
  data() {
    return {
      params: "",
      list: [],
      banner: [],
      userId: this.$store.state.users.user_id,
    };
  },
  created() {
    this.paramsList();
    this.getdata();
    this.bannerr();
  },

  methods: {
    //加入购物车
    async shopcart(pidd) {
      const res = await shoplove({ user_id: this.userId, product_id: pidd });
      console.log(res, "xh");
      if (res.code == "001" || res.code == "002" || res.code == "003") {
        this.$notify.success({
          title: "加入购物车成功",
          message: res.msg,
          showClose: false,
        });
      }
      if (res.code == "003") {
        this.$notify.error({
          title: "该商品已收藏",
          message: res.msg,
          showClose: false,
        });
      }
    },

    //收藏
    async love(pid) {
      const res = await loveList({ user_id: this.userId, product_id: pid });
      console.log(res, "xh");
      if (res.code == "001" || res.code == "002" || res.code == "003") {
        this.$notify.success({
          title: "收藏成功",
          message: res.msg,
          showClose: false,
        });
      }
      if (res.code == "003") {
        this.$notify.error({
          title: "该商品已收藏",
          message: res.msg,
          showClose: false,
        });
      }
    },
    // 轮播图渲染
    async bannerr() {
      let res = await bannerList({ productID: this.params });
      if (res.code == "001") {
        this.banner = res.ProductPicture;
        console.log(res.ProductPicture, "轮播");
      }
    },
    // 接收传过来的id
    paramsList() {
      this.params = this.$route.query.type;
    },
    //渲染数据
    async getdata() {
      let res = await getdatalist({ productID: this.params });
      if (res.code == "001") {
        console.log(res.Product, "xq");
        this.list = res.Product;
      }
    },
    // 跳转
    //轮播图
  },
};
</script>

<style lang="scss" scoped>
button {
  background-color: #fff;
  z-index: 1;
  position: relative;
  overflow: hidden;
  color: red;
  border: 3px solid red;
  padding: 10px 20px;
  font-family: Arial;
  font-weight: 800;
  font-size: 1.05em;
  border-radius: 15px;
  transition: transform 0.3s ease, color 0.5s ease;
}

button::before {
  content: "";
  inset: 0 0 0 0;
  margin: auto;
  height: 0px;
  width: 0px;
  position: absolute;
  background-color: red;
  z-index: -1;
  border-radius: 50%;
  transition: all 0.7s ease;
}

button:active {
  transform: scale(0.9);
}

button:hover {
  color: #fff;
}

button:hover:before {
  height: 200px;
  width: 200px;
}
button {
  font-size: 17px;
  font-family: inherit;
  font-weight: 700;
  padding: 4px;
  border-radius: 20px;
  border: none;
  color: black;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  background: linear-gradient(
    0deg,
    rgba(255, 213, 0, 1) 0%,
    rgba(255, 213, 0, 1) 47%,
    rgba(0, 91, 187, 1) 47%,
    rgba(0, 91, 187, 1) 100%
  );
}

button .button-content {
  display: flex;
  align-items: center;
  background: white;
  padding: 0.7em 1.5em;
  padding-left: 1.2em;
  border-radius: 16px;
}

button svg {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  color: #ff0000;
  transition: transform 0.3s;
}

button:hover svg {
  transform: scale(1.2);
}
.s11 {
  width: 80%;
  height: 560px;
  margin: auto;
  display: flex;
  .s11-1 {
    width: 50%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .s12 {
    width: 50%;
    height: 100%;
    background-color: white;
    .list {
      width: 100%;
      height: 100px;
      // background-color: #475669;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .s13 {
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 24px;
      font-weight: 400;
      color: #212121;
    }
    .s14 {
      width: 100%;
      height: 70px;
      background-color: white;
      color: #b0b0b0;
      padding-top: 10px;
    }
    .s15 {
      width: 100%;
      height: 30px;
      background-color: white;
      color: #ff6700;
      padding-top: 10px;
    }
    .s16 {
      width: 100%;
      height: 60px;
      font-size: 18px;
      color: #ff6700;
      border-bottom: 1px solid #e0e0e0;
      margin-top: 20px;
      s {
        font-size: 14px;
        margin-left: 10px;
        color: #b0b0b0;
        text-decoration: line-through;
      }
    }
    .s17 {
      width: 100%;
      height: 134px;
      background-color: #f9f9fa;
      margin-top: 35px;
      .s18 {
        width: 100%;
        height: 40px;
      }
      .s19 {
        width: 100%;
        height: 55%;
        .s20 {
          width: 100%;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .s21 {
          width: 100%;
          height: 58px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff6700;
          font-size: 24px;
        }
      }
    }
  }
}
.s1 {
  width: 100%;
  height: 64px;
  background-color: white;
  .s2 {
    width: 80%;
    height: 64px;
    background-color: white;
    margin: auto;
    line-height: 64px;
    font-size: 20px;
    font-weight: 400;
    color: #212121;
  }
}

//轮播图
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>